<template>
  <div class="math-box">
    <headers
      :current-date-time="currentDateTime"
      @changeCurrentDateTime="getCurrentDateTime"
    ></headers>
    <div class="main-box">
      <div class="main-left">
        <MainLeft :data="leftData" ref="mainLeftRef"></MainLeft>
      </div>
      <div class="main-mid">
        <MainMid ref="mainMidRef"></MainMid>
      </div>
      <div class="main-right">
        <MainRight :data="rightData" ref="mainRightRef"></MainRight>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import headers from "./components/headers.vue";
import MainLeft from "./components/left.vue";
import MainMid from "./components/mid.vue";
import MainRight from "./components/right.vue";
import { leftAPI,mainAPI,rightAPI } from "../../api/szbgt";
import dayjs from "dayjs";

const currentDateTime = ref(dayjs().format("YYYY-MM-DD HH:mm:ss"));
const getCurrentDateTime = (val) => {
  currentDateTime.value = val;
  getData();
};
const leftData = ref([])
const customsCode = ref('2248')
const getLeftData = () => {
  leftAPI({customsCode:customsCode.value,currentDateTime: currentDateTime.value}).then(res=>{
    // console.log(res)
    leftData.value = res.data.sectionStatsList
  })
};
const mainData = ref([])
const getMainData = () => {
  // mainAPI({customsCode:'2201',currentDateTime: currentDateTime.value}).then(res=>{
  //   console.log(res)
  //   mainData.value = res.data.sectionStatsList
  // })
};
const rightData = ref([])
const getRightData = () => {
  rightAPI({customsCode:customsCode.value,currentDateTime: currentDateTime.value}).then(res=>{
    console.log(res)
    rightData.value = res.data
  })
};

const getData = () => {
  getLeftData();
  getMainData();
  getRightData();
};
getData();

const mainLeftRef = ref();
const mainMidRef = ref();
const mainRightRef = ref();

const lastWidth = ref(0);
const lastHeight = ref(0);
window.addEventListener("resize", () => {
  if (lastWidth.value !== window.innerWidth) {
    console.log("渲染", window.innerWidth);
    lastWidth.value = window.innerWidth;
    lastHeight.value = window.innerHeight;
    if (mainLeftRef.value) {
      mainLeftRef.value.resizeRender();
    }
    if (mainMidRef.value) {
      mainMidRef.value.resizeRender();
    }

    if (mainRightRef.value) {
      mainRightRef.value.resizeRender();
    }
  }
});
</script>

<style scoped lang="scss">
.math-box {
  width: 100%;
  height: 100%;
  padding: 0 54px 0 50px;
  box-sizing: border-box;
  background-image: url(../../assets/imgs/bigBack-V2.png);
  background-size: 100% 100%;
  // background-size: cover;
  background-repeat: no-repeat;
  overflow-y: scroll;
}
.math-box::-webkit-scrollbar {
  display: none;
}

.main-box {
  display: flex;
  //   padding: 0 40px 0 50px;
  //   box-sizing: border-box;
  .main-left {
    flex: 9;
    // width: 388px;
  }
  .main-mid {
    width: 960px;
    margin: 0 20px;
  }
  .main-right {
    flex: 10;
    max-width: 428px;
  }
}
</style>
